<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>computed观察属性的应用</title>
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
		<script src="../js/vue.js"></script>
	</head>
	
	<!-- 
	computed变量可以直接调用但是当传递参数时候必须以JavaScript闭包的形式：书写方法
	 -->
	<body>
		<div id="app">
			<p>双11活动iPhone12大降价 不行你就来砍一刀</p>
			<p>原价{{price}},美元{{meiyuan(price)}}</p>
			<p>砍完后{{newprice}}美元{{meiyuan(newprice)}}</p>
			<p><button v-on:click="buy">立即下单</button></p>
			<button v-on:click="ChopAknife(newprice)">点击随机砍一刀</button>
			<h1 v-show="show" style="color: red;">大哥！现价格{{newprice}}不能再砍了!!!</h1>
		</div>

		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					go:true,
					price: 12888,
					newprice: 12888,
					show: false
					
				},
				methods: {
					ChopAknife: function(price) {
						//如果手机价格大于5000块钱我们就要砍一刀
						console.log(price);
						if (this.go) {
							this.newprice = price * Math.random();
						}
					},
					buy: function() {
						if (this.newprice != 12888) {
							alert("没货了")
						} else {
							alert("购买成功")
						}
					}

				},
				watch: {
					newprice: function() {
						if (this.newprice < 5000) {
							this.show = true;
							this.go=false;
						} else {
							alert("恭喜大哥砍价成功最新价格是" + this.newprice);
						}

					}
				},computed:{
					//笔记此处有计算属性传值的操作
					meiyuan(){
						return function(value){
							return value/7;
						}
					}
				}
			});
		</script>
	</body>
</html>
